<%--
  Created by IntelliJ IDEA.
  User: gaopeng
  Date: 2021/7/8
  Time: 23:29
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/jquery.fSelect.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.fSelect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('.demo').fSelect();
            /*页面加载后每隔5秒点击下一页，并获取pageCount中的值，
            拆分比较是否是最后一页，若是最后一页，发送一个请求*/
            //alert();

            time = setInterval("clickNextPage()",6000);//毫秒单位
        });

        function clickNextPage(){
            /*if pageCount<MaxPage then
            * else
            * end if
            * */
            var str = $("#pageCount").text();
            var str_rep1 = str.replace("[","");
            var str_rep2 = str_rep1.replace("]","");
            var str_arr = str_rep2.split('/');

            if (str_arr[0]==str_arr[1]){
                //alert(str_arr[0]&"-"&str_arr[1]);
                //$.post("${pageContext.request.contextPath}/product/selectDistinct");
                document.getElementById("reload").click();
            }else{
                document.getElementById("nextPage").click();
            }
        }

       <%-- //----------------------------------------------------------------------------------
        //获取浏览器页面可见高度和宽度
        var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
        //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
        var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px;  border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
        //监听加载状态改变
        document.onreadystatechange = completeLoading;
        document.write(_LoadingHtml);
        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                setTimeout(function(){
                    loadingMask = document.getElementById('loadingDiv');
                    document.getElementById('loadingDiv').parentNode.removeChild(loadingMask);
                    console.log(this);
                },3000);
            }
        }--%>
    </script>

    <%--//------------------------页面加载前动画----------------------------%>
    <link rel="stylesheet" type="text/css" href="/./js/loader.css">
    <script type="text/javascript">
        // 等待所有加载
        $(window).load(function(){
            $('body').addClass('loaded');
            $('#loader-wrapper .load_title').remove();
        });
    </script>
    <%--//------------------------页面加载前动画----------------------------%>

    <style type="text/css">
        select{
            width: 10px;
        }
    </style>
    <title>商品列表</title>

</head>
<body>
    <%--//------------------------页面加载前动画--------------------------%>
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">正在加载LoveFeel站点
            <span>V1.0</span></div>
    </div>
    <%--//------------------------页面加载前动画--------------------------%>

    <a href="${pageContext.request.contextPath}/product/selectDistinct" id="reload"/>
    <div class="container" style="width: 100%">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h1>
                        <small>商品列表 —— 显示所有商品</small>
                    </h1>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 column">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}">新增</a>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-md-12 column">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>
                            <div style="float: left">商品编号</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="pidlist_">
                                    <c:forEach var="pids" items="${requestScope.get('pidlist')}">
                                        <option value="${pids}">${pids}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">商品名字</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="pnamelist_">
                                    <c:forEach var="pnames" items="${requestScope.get('pnamelist')}">
                                        <option value="${pnames}">${pnames}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">市场价格</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="marketpricelist_">
                                    <c:forEach var="marketprices" items="${requestScope.get('marketpricelist')}">
                                        <option value="${marketprices}">${marketprices}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">商品价格</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="pricelist_">
                                    <c:forEach var="prices" items="${requestScope.get('pricelist')}">
                                        <option value="${prices}">${prices}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">上架时间</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="pdatelist_">
                                    <c:forEach var="pdates" items="${requestScope.get('pdatelist')}">
                                        <option value="${pdates}">${pdates}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">是否热门</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="ishotlist_">
                                    <c:forEach var="ishots" items="${requestScope.get('ishotlist')}">
                                        <option value="${ishots}">${ishots}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">商品标志</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="flaglist_">
                                    <c:forEach var="flags" items="${requestScope.get('flaglist')}">
                                        <option value="${flags}">${flags}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <%--<th>图片地址</th>-->
                        <%--<th>商品描述</th>--%>
                        <th>
                            <div style="float: left">商品分类</div>
                            <br>
                            <div style="float: left">
                                <select class="demo" multiple="multiple" id="cidlist_">
                                    <c:forEach var="cids" items="${requestScope.get('cidlist')}">
                                        <option value="${cids}">${cids}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </th>
                        <th>
                            <div style="float: left">操作</div>
                            <br>
                            <div style="float: left">
                                <a class="btn btn-primary" href="${pageContext.request.contextPath}">提交筛选</a>
                            </div>
                        </th>
                    </tr>
                    </thead>

                    <tbody>
                    <c:forEach var="product" items="${requestScope.get('productList')}">
                        <tr>
                            <td>${product.getPid()}</td>
                            <td>${product.getPname()}</td>
                            <td>${product.getMarket_price()}</td>
                            <td>${product.getShop_price()}</td>
                            <%--<td>${product.getPimage()}</td>--%>
                            <td>${product.getPdate()}</td>
                            <td>${product.getIs_hot()}</td>
                            <%--<td>${product.getPdesc()}</td>--%>
                            <td>${product.getPflag()}</td>
                            <td>${product.getCid()}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}">更改</a> |
                                <a href="${pageContext.request.contextPath}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <div>${pageTool}</div>
            </div>
        </div>
    </div>
    <jsp:include page="frameFooter.jsp"/>
</body>
</html>
